<template>
  <div>
    <el-container style="width: 100%; height: 100vh; ">
      <!--注册界面侧边栏-->
      <el-aside width="400px">
        <!--注册Logo-->
        <img class="iLogo" src="https://image.ibear.top/favicon.ico">
        <!--欢迎语句-->
        <p class="iFont">
          欢迎注册你的BLOG
        </p>
      </el-aside>

      <!--注册主体-->
      <el-main>
        <div>
          <h1 style="font-size: 30px;">注册</h1>
        </div>

        <el-form status-icon :model="registerForm" ref="registerForm" :rules="rules" size="normal"
                 class="demo-registerForm">
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user-solid" v-model="registerForm.username"
                      placeholder="请输入您的用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" v-model="registerForm.password" type="password" show-password
                      placeholder="请输入您的密码"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" v-model="registerForm.confirm" type="password" show-password
                      placeholder="请确认您的密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="register('registerForm')" style="width: 300px">注册</el-button>
            <p style="margin-top: 30px">
              <el-link type="success" :underline="false" style="font-size: 12px" @click="toLogin">已有账号？返回登录！</el-link>
            </p>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>


<script>
import request from "@/utils/request";

export default {
  name: "Register",

  data() {
    return {
      registerForm: {},
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: blur()},
          {min: 3, max: 15, message: "长度为3-15位字符", trigger: blur()}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: blur()},
          {min: 7, max: 12, message: "长度为7-12位字符", trigger: blur()}
        ],
        confirm: [
          {required: true, message: "请确认密码", trigger: blur()},
          {min: 7, max: 12, message: "长度为7-12位字符", trigger: blur()}
        ],
      },
    }
  },


  methods: {
    register() {
      this.$refs["registerForm"].validate((valid) => {
        if (valid) {
          request.post("/user/register", this.registerForm).then(res => {
            if (res.code === '0') {
              this.$message({
                type: "success",
                message: "注册成功"
              })
              this.$router.push("/login") //注册成功则跳转登录界面
            } else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
          })
        }
      })

      if (this.registerForm.password !== this.registerForm.confirm) {
        this.$message({
          type: "error",
          message: "两次密码不一致"
        })
        return
      }


    },

    toLogin(){
      this.$router.push("/login") //跳转登录界面
    }
  }
}
</script>

<style scoped>
.el-aside {
  background-color: indianred;
  color: #333;
  text-align: center;
  line-height: 100px;
}

.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  line-height: 300px;
}

.iFont {
  font-size: 20px;
  color: whitesmoke;
  font-family: "Arial Black";
}

.iLogo {
  height: 10%;
  margin: 130px auto;
}

.demo-registerForm {
  max-width: 300px;
  margin: 0 auto;
}

/*.allCenter {*/
/*  margin: auto;*/
/*}*/
</style>